<template>
  <div
    v-touch-pan.prevent.mouse="moveFab"
    :style="`margin-right: ${fabPos[0]}px; margin-bottom: ${fabPos[1]}px;`"
    class="fixed-bottom-right callback-button"
    style="z-index: 2001"
  >
    <q-fab
      v-model="fab1"
      :class="{ pulse: !fab1 && !draggingFab }"
      :disable="draggingFab"
      class="animated slower infinite"
      direction="up"
      icon="report_problem"
      style="background: #0fab9d; color: white"
      vertical-actions-align="right"
    >
      <q-fab-action
        color="accent"
        external-label
        icon="report_problem"
        label="Сообщить о проблеме"
        label-class=" callback-button-label main-block-with-cropped"
        label-position="left"
        @click="
          dialogVisible = true;
          sendYMgoal($route.path, 'click', 'callback');
        "
      />
    </q-fab>
  </div>
  <call-back-dialog v-model:showCallbackDialog="dialogVisible" />
</template>
<script>
import CallBackDialog from "components/callBackDialog";
import { openURL } from "quasar";
import { sendYMgoal } from "src/utils/yandex_metrika_utils";

export default {
  components: { CallBackDialog },
  name: "CallbackButton",
  setup() {
    return {};
  },
  data() {
    return {
      fab1: false,
      fabPos: [22, 62],
      draggingFab: false,
      dialogVisible: false,
      openURL,
      sendYMgoal,
    };
  },
  methods: {
    onClick: function (e) {
      // sendToCRM(4, { page: process.env.APP_HOST + this.$route.path });
    },
    moveFab(ev) {
      this.draggingFab = ev.isFirst !== true && ev.isFinal !== true;

      this.fabPos = [this.fabPos[0] - ev.delta.x, this.fabPos[1] - ev.delta.y];
    },
  },
  computed: {},
};
</script>
<style>
.callback-button-label {
  background: rgba(56, 38, 89, 0.8);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  padding: 5px 10px;
  /* letter-spacing: 0.05em; */
  color: white;
  /* border: 1.5px dotted white; */
}

.callback-button .q-btn--fab-mini img {
  /* width: 40px; */
  /* height: 40px; */
}
</style>
